查看原文
其他

那些容易被忽略的设计细节 @加载

RaDesign 2022-10-10

The following article is from 春光IN画 Author 创新设计组



前言

加载用于页面和区块的加载中状态。对用户来说是一种反馈,是用户触发,系统反应的过程。设计师日常需求经常会经常遇到加载,拿新页面来说需要考虑:刷新机制、加载中状态、内容加载顺序、数据加载还是操作加载(是否可以下拉刷新,下拉刷新位置及样式...)还有是原生 or RN(React Native)or H5。 

本文章针对加载多场景,多类型,多状态做了针对性的梳理,从产品架构分析到后期落地的一些加载动画进行讲解和展示。

全篇共 2072,大概需 5-10 分钟的阅读时间。建议浅色模式浏览



目录:

Part 1 理论篇:加载的逻辑梳理

Part 2 实践篇:基于场景,分析 “加载” 的实际应用



Part 1  理论篇:加载的逻辑梳理

“加载” 很重要!!!
  • 对于新用户

首次进入平台没有数据,一定有空页面状态,这时加载和空状态结合就非常重要;

  • 对于老用户

也能够提升用户体验度以及更好的深入产品功能和运营玩法。


根据上图,可以得知:连接数据库-请求服务器-返回对应数据 这样的过程会产生加载,这时就需要有加载动效来承接此页面。



梳理了加载逻辑框架如下:建议电脑浏览



主要分两大块:数据加载 操作过程加载



1. 数据加载:有缓存/无缓存

a. 有缓存:先展示缓存内容,后加载新内容。

b. 无缓存:无数据情况下加载的形式。

因为有缓存的加载形式属于无缓存中的一部分,所以主要分析无缓存的加载形式。


a) 白屏加载

白屏加载可理解为H5页面的加载,页面中间一般有进度条加载/菊花加载/品牌符号加载,整体页面来看,目前市面上的加载形式有三种:返回按钮+静态标识、返回按钮+活动标题+动态loading、返回按钮+活动标题+骨架屏兜底加载


总结:(支付宝)加载形式体验度更好,提供了返回按钮,也告知了用户当前页面是做什么,同时有大框架的兜底,最大程度的打消了用户急躁心理。



b) 分步加载

分步加载:针对图文结合的页面,顺序加载,先加载较快的元素(文字),后加载较慢的图片(较大元素),让页面过渡更为流畅。


一般情况下在图片未加载出来之前图片都是灰色的方块,其实这样并没有达到最好的效果,可以在方块上增加品牌符号+扫光效果,第一深入品牌,其次告知用户当前状态.(案例:上图右侧动画)



c) 智能加载

智能加载:指软件可以根据手机的网络环境进行加载。

举一个比较常见的例子:我们如果是wifi的情况下刷微博,视频是自动加载播放的;而如果是手机网络,视频是需要主动触发才可以播放的。


d) 懒加载

懒加载: 一般在feed流或列表页面,当页面有较多内容时,会分批加载。


e) 预加载


预加载:更多被运用在阅读类的平台中。会预先加载页面当中的前3-5条内容的二级页面,防止用户在网络不稳定或者断网的情况下,不能顺利的阅读内容(如上图)。
大部分情况下,只会加载二级页面的文字信息,图片信息一般不会预先加载。



2. 操作过程加载

a) 模态加载:

模态加载:防止用户在加载过程中进行其他操作,导致当前加载出错出现的一个模态提示层。(案例:微信支付中)

不过采用这种加载形式,可能会因为网络原因或者内容过多导致长时间处于加载状态,建议提供一个“取消”的操作。


b) 控件自加载

提到控件自加载,可能更多人的印象中它是属于PC端的加载方式,但其实最早期移动端也是必须要有控件加载状态的,得益于网络的提速,很多设计师会忽略掉控件加载。但如果我们在使用软件的过程中,点击一个按钮,因为网络的问题没有任何跳转和提示,这时你会怎么样呢?是不是觉得卡住了或者出现bug,就有可能导致用户杀后台的行为。


所以设计师应考虑所有控件的加载状态!!!


c) 后台加载

后台加载:用户操作功能后,先改变状态后处理交互的行为。

这样一来,用户不用等待太久的时间,可以继续浏览其他内容,把发布的内容放在后台处理。 像微博/抖音/陌陌等在发布动态的时候都是使用这样的加载形式,体验非常好。


以上就是所有加载方式,小伙伴们可以带入所负责的项目进行思考。




Part 2 实践篇:基于场景,分析 “加载” 的实际应用

结合负责的对缘产品来分析>>>




一稿:以平台的性质出发,联想到了丘比特之箭,采用射箭的动画形式体现相亲寻找爱情的意义。




二稿:因一稿没有考虑平台的品牌IP,不够具有品牌特色。



三稿:目前市面上的加载动画越来越丰富,除了解决加载期间急躁的情绪之外也希望给用户带来一些趣味感。


所以我们也考虑采用手势跟随的形式来设计,也融入平台的相亲性质。

a)下拉 [对对IP] 左右寻觅观察 —— 寓意着寻找爱情。

b)松开之后怀抱爱心左右摇晃 —— 代表找到爱情之后愉快情绪。




END

以上就是本次的分享内容,如果你也在梳理平台的加载逻辑;设计加载动画,那希望这篇文章能对你有所帮助。





您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存